<template>
  <div>
    <el-container>
      <el-main>
        <!-- <div class="item">
          <p style="margin-top: 60px;">用户名：<el-input v-model="user.username" placeholder="请输入内容" style="width: 200px;"></el-input></p>
          <p style="margin-left: 17px;">密码：<el-input v-model="user.password" placeholder="请输入内容" style="width: 200px;"></el-input></p>
          
          <div >
            <p >验证码：
            <el-input v-model="input" placeholder="请输入内容" style="width: 200px;"></el-input></p>
            <div id="code" @click="getSvg()"></div>
          </div>
        </div> -->
        <el-form
          :model="user"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
          label-position="left"
          style="margin-top: 40px"
        >
          <el-form-item label="用户名">
            <el-input v-model="user.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              type="password"
              v-model="user.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <div style="display: flex;">
              <el-input
                style="width: 200px;"
                v-model="user.code"
                autocomplete="off"
              ></el-input>
              <div id="code" @click="getSvg()" style="height: 40px;margin-left: 10px;"></div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(user)">提交</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        code: "",
      },
      text: "",
      data: "",
    };
  },
  methods: {
    async getSvg(){
      let {data:{text,data}} = await this.axios.get("/getSvg")
      this.text = text
      this.data = data
      this.data = `<div>${ this.data }</div>`
      code.innerHTML = this.data
    },

    async submitForm(formName) {
      console.log(formName);
      // this.$refs[formName].validate(async(valid) => {
      //   if (valid) {
      if (this.user.code == this.text) {
        console.log(this.user);
        let {
          data: { code, token, msg },
        } = await this.axios.post("/login", this.user);
        if (code == 200) {
          sessionStorage.setItem("token", token);
          sessionStorage.setItem("time", new Date().getTime());
          this.$router.push("/index");
          this.$message.success(msg);
        }
      } else {
        this.$message.error("验证码错误");
      }
      // } else {
      //   console.log('error submit!!');
      //   return false;
      // }
    },
  },
  created() {
    this.getSvg();
  },
};
</script>

<style>
.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
  line-height: 60px;
  height: 400px;
  width: 500px;
}
* {
  margin: 0;
  padding: 0;
}
.el-container {
  width: 500px;
  /* text-align: center; */
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 150px;
}
.el-form-item {
  margin-top: 40px;
}
</style>